/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline" label-width="100px">
      <el-form-item label="市选择：">
        <el-select
          v-model="formInline.cityId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getCity"
        >
          <el-option
            v-for="item in optionsListCity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区选择：">
        <el-select
          v-model="formInline.districtId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getDist"
        >
          <el-option
            v-for="item in optionsListDist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站选择：">
        <el-select
          v-model="formInline.stationId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeStation"
        >
          <el-option
            v-for="item in selectItemType"
            :key="item.id"
            :label="item.staName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="桩选择：">
        <el-select
          v-model="formInline.stakeId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsListStake"
            :key="item.id"
            :label="item.devName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="告警来源：">
        <el-select
          v-model="formInline.warnSource"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in warnSource"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生产厂商：">
        <el-input style="width: 200px" v-model="formInline.factName" placeholder="生产厂商"></el-input>
      </el-form-item>
      <el-form-item label="告警等级：">
        <el-select
          v-model="formInline.warnLevel"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in warnLevel"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="stationName" label="站名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cityName" label="市名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="districtName" label="区名称" :show-overflow-tooltip="true"></el-table-column>
<!--      <el-table-column prop="stakeName" label="桩名称" :show-overflow-tooltip="true"></el-table-column>-->
      <el-table-column prop="warnLevel" label="告警等级" width="80px">
        <template v-slot="scope">
          <span :style="{color:warnLevel[Number(scope.row.warnLevel)-1].color}" v-if="scope.row.warnLevel">{{warnLevel[Number(scope.row.warnLevel)-1].name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="warnSource" label="告警来源">
        <template v-slot="scope">
          {{warnSource[Number(scope.row.warnSource) - 1].name}}
        </template>
      </el-table-column>
      <el-table-column prop="checkDesc" label="告警内容" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createTime" label="告警开始时间" :show-overflow-tooltip="true"></el-table-column>
<!--      <el-table-column prop="factName" label="生产厂商" :show-overflow-tooltip="true"></el-table-column>-->
      <el-table-column label="操作" width="100px">
        <template v-slot="scope">
          <el-button class="common-btn" @click="getEditor(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="pagination.pageSize"
      layout="total, sizes, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
    <detailAlarm v-if="DialogComponentShow" :DialogComponentShow="DialogComponentShow" @closeDialog="closeDialog"  :row="row"></detailAlarm>
  </div>
</template>

<script>
import {warn, plan} from "../../api/inspection/apiUntil";
import detailAlarm from './detailAlarm.vue'
import {getWarnStake} from "../../api/inspection/warn";
export default {
  components:{
    detailAlarm
  },
  data() {
    return {
      optionsListCity: [],
      optionsListDist: [],
      optionsListStake:[],
      option: [],
      tableData: [],
      tableDataExpansion: [],
      DialogComponentShow:false,
      row:'',
      titlePatrol: '',
      selectItemType: [],
      warnLevel:[
        {
          name:'暂无风险',
          value:1,
          color:'green'
        },
        {
          name:'低风险',
          value:2,
          color:'green'
        },
        {
          name:'中风险',
          value:3,
          color:'#FF8D1A'
        },
        {
          name:'高风险',
          value:4,
          color:'#FF0000'
        },
        {
          name:'重大风险',
          value:5,
          color:'red'
        },
      ],
      warnSource: [
        {
          name: '风险评估',
          value: '1'
        },
        {
          name: '远程巡检',
          value: '2'
        },
        {
          name: '故障诊断',
          value: '3'
        }
      ],
      formInline: {
        stationId: '',
        stakeId: '',
        warnSource: '',
        warnLevel: '',
        factName: '',
        cityId: '',
        districtId:''
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  mounted() {
    this.getInit()
    this.getPlanCity()
  },
  watch: {
    'formInline.cityId': function (newData, oldData) {
      if(newData!=oldData){
        this.formInline.districtId = ''
        this.formInline.stationId = ''
        this.formInline.stakeId = ''
      }
    },
    'formInline.districtId': function (newData, oldData) {
      if(newData!=oldData){
        this.formInline.stationId = ''
        this.formInline.stakeId = ''
      }
    },
    'formInline.stationId': function (newData, oldData) {
      if(newData!=oldData){
        this.formInline.stakeId = ''
      }
    }
  },
  methods: {
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
      })
    },
    changeStation(e){
      if(e){
        let params ={
          id: this.formInline.stationId
        }
        warn.getWarnStake(params).then((res) => {
          this.optionsListStake = res.data
        })
      }else {
        this.formInline.stakeId=''
      }

    },
    getCity(e){
      this.optionsListDist = []
      this.optionsListStake = []
      if(e){
        this.optionsListCity.forEach((item)=>{
          if(item.id===e){
            this.optionsListDist = item.children
          }
        })
      }else {
        this.formInline.districtId=''
      }
    },
    getDist(e) {
      if(e){
        this.getPlanStat()
      }else {
        this.formInline.stationId=''
        this.formInline.stakeId=''
      }
    },
    //站
    getPlanStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.selectItemType = res.data
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.getInit()
    },
    getEditor(row) {
      this.DialogComponentShow = true
      this.row = row
    },
    //关闭弹框
    closeDialog() {
      this.DialogComponentShow = false
      this.getInit()
    },
    //列表
    getInit() {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        ...this.formInline
      }
      warn.getWarnQuery(params).then((res) => {
        if (res) {
          this.tableData = res.data
          this.pagination.total = res.total
        }
      })
    },
    onSubmit() {
      this.getInit()
    },
    //手动清空
    reset() {
      this.formInline.stationId = ''
      this.formInline.stakeId = ''
      this.formInline.warnSource = ''
      this.formInline.districtId = ''
      this.formInline.warnLevel = ''
      this.formInline.factName = ''
      this.formInline.cityId = ''
      this.getInit()
    },
  }
};

</script>

<style scoped>

</style>
